<template>
  <div>
    <h1>computed函数使用</h1>
    <ul>
      <li v-for="(num, i) in list" :key="i">{{ num }}</li>
    </ul>
    <hr />
    <!-- 渲染计算属性计算的结果 -->
    <ul>
      <li v-for="item in list2" :key="item">{{ item }}</li>
    </ul>
    <button @click="add">修改list</button>
    <hr />
    <p>{{ strAdd }}</p>
  </div>
</template>

<script>
/**
 * **使用步骤**
1. 从vue框架中导入`computed` 函数
2. 在setup函数中执行computed函数，并传入一个函数，在函数中定义计算公式
3. 把computed函数调用完的执行结果放到setup的return值对象中
 */
import { computed, ref } from 'vue'
export default {
  // computed: {
  //   name() {
  //     return this.data.a
  //   }
  // },
  setup () {
    // 1. 准备一个data变量
    const list = ref([2, 3, 4, 5, 6, 1])
    // 2. 使用computed函数计算list
    const list2 = computed(() => {
      // 需求：获取列表中大于3的数据
      // 返回计算结果=》渲染
      return list.value.filter(item => item > 3)
    })
    // 修改list
    const add = () => {
      list.value.push(1)
    }
    const str = ref('hi')
    const strAdd = computed(() => {
      return str.value + 'vue3!'
    })
    // 模板使用一定要返回
    return { list, list2, add, strAdd }
  }
}
</script>

<style lang="scss" scoped>
</style>
